/**
 * Spinner component
 * wrap the rn-spinkit components
 */
import React, { Component } from 'react';
import {
  View,
} from 'react-native';

import Spinner from 'react-native-spinkit';

const defaultSize = 30;
const defaultColor = '#108eeb';

const Wrapper = ({
  horizontalCenter,
  verticalCenter,
  top,
  right,
  bottom,
  left,
  children,
}) => (
  <View
    style={[
      verticalCenter && { flex: 1, justifyContent: 'center' },
      horizontalCenter && { alignItems: 'center' },
      {
        marginTop: top,
        marginRight: right,
        marginBottom: bottom,
        marginLeft: left,
      },
    ]}>
    {children}
  </View>
);



// <<---------------------------------------export area----------------------------------------->>
const CircleFlip = ({
  size = defaultSize,
  color = defaultColor,
  horizontalCenter = true,
  verticalCenter = true,
  top = 0,
  right = 0,
  bottom = 0,
  left = 0,
}) => (
  <Wrapper
    {...{
      horizontalCenter,
      verticalCenter,
      top,
      right,
      bottom,
      left,
    }}>
    <Spinner
      isVisible
      type="CircleFlip"
      size={size || defaultSize}
      color={color || defaultColor}
    />
  </Wrapper>
);

const Bounce = ({
  size = defaultSize,
  color = defaultColor,
  horizontalCenter = true,
  verticalCenter = true,
  top = 0,
  right = 0,
  bottom = 0,
  left = 0,
}) => (
  <Wrapper
    {...{
      horizontalCenter,
      verticalCenter,
      top,
      right,
      bottom,
      left,
    }}>
    <Spinner
      isVisible
      type="Bounce"
      size={size || defaultSize}
      color={color || defaultColor}
    />
  </Wrapper>
);

const Wave = ({
  size = defaultSize,
  color = defaultColor,
  horizontalCenter = true,
  verticalCenter = true,
  top = 0,
  right = 0,
  bottom = 0,
  left = 0,
}) => (
  <Wrapper
    {...{
      horizontalCenter,
      verticalCenter,
      top,
      right,
      bottom,
      left,
    }}>
    <Spinner
      isVisible
      type="Wave"
      size={size || defaultSize}
      color={color || defaultColor}
    />
  </Wrapper>
);

const WanderingCubes = ({
  size = defaultSize,
  color = defaultColor,
  horizontalCenter = true,
  verticalCenter = true,
  top = 0,
  right = 0,
  bottom = 0,
  left = 0,
}) => (
  <Wrapper
    {...{
      horizontalCenter,
      verticalCenter,
      top,
      right,
      bottom,
      left,
    }}>
    <Spinner
      isVisible
      type="WanderingCubes"
      size={size || defaultSize}
      color={color || defaultColor}
    />
  </Wrapper>
);

const Pulse = ({
  size = defaultSize,
  color = defaultColor,
  horizontalCenter = true,
  verticalCenter = true,
  top = 0,
  right = 0,
  bottom = 0,
  left = 0,
}) => (
  <Wrapper
    {...{
      horizontalCenter,
      verticalCenter,
      top,
      right,
      bottom,
      left,
    }}>
    <Spinner
      isVisible
      type="Pulse"
      size={size || defaultSize}
      color={color || defaultColor}
    />
  </Wrapper>
);

const ChasingDots = ({
  size = defaultSize,
  color = defaultColor,
  horizontalCenter = true,
  verticalCenter = true,
  top = 0,
  right = 0,
  bottom = 0,
  left = 0,
}) => (
  <Wrapper
    {...{
      horizontalCenter,
      verticalCenter,
      top,
      right,
      bottom,
      left,
    }}>
    <Spinner
      isVisible
      type="ChasingDots"
      size={size || defaultSize}
      color={color || defaultColor}
    />
  </Wrapper>
);

const ThreeBounce = ({
  size = defaultSize,
  color = defaultColor,
  horizontalCenter = true,
  verticalCenter = true,
  top = 0,
  right = 0,
  bottom = 0,
  left = 0,
}) => (
  <Wrapper
    {...{
      horizontalCenter,
      verticalCenter,
      top,
      right,
      bottom,
      left,
    }}>
    <Spinner
      isVisible
      type="ThreeBounce"
      size={size || defaultSize}
      color={color || defaultColor}
    />
  </Wrapper>
);

const Circle = ({
  size = defaultSize,
  color = defaultColor,
  horizontalCenter = true,
  verticalCenter = true,
  top = 0,
  right = 0,
  bottom = 0,
  left = 0,
}) => (
  <Wrapper
    {...{
      horizontalCenter,
      verticalCenter,
      top,
      right,
      bottom,
      left,
    }}>
    <Spinner
      isVisible
      type="Circle"
      size={size || defaultSize}
      color={color || defaultColor}
    />
  </Wrapper>
);

const CubeGrid = ({
  size = defaultSize,
  color = defaultColor,
  horizontalCenter = true,
  verticalCenter = true,
  top = 0,
  right = 0,
  bottom = 0,
  left = 0,
}) => (
  <Wrapper
    {...{
      horizontalCenter,
      verticalCenter,
      top,
      right,
      bottom,
      left,
    }}>
    <Spinner
      isVisible
      type="9CubeGrid"
      size={size || defaultSize}
      color={color || defaultColor}
    />
  </Wrapper>
);

const FadingCircleAlt = ({
  size = defaultSize,
  color = defaultColor,
  horizontalCenter = true,
  verticalCenter = true,
  top = 0,
  right = 0,
  bottom = 0,
  left = 0,
}) => (
  <Wrapper
    {...{
      horizontalCenter,
      verticalCenter,
      top,
      right,
      bottom,
      left,
    }}>
    <Spinner
      isVisible
      type="FadingCircleAlt"
      size={size || defaultSize}
      color={color || defaultColor}
    />
  </Wrapper>
);

export default {
  CircleFlip,
  Bounce,
  Wave,
  WanderingCubes,
  Pulse,
  ChasingDots,
  ThreeBounce,
  Circle,
  CubeGrid,
  FadingCircleAlt,
};
